<template>
  <div class="container">
    <!-- 健康概览部分 -->
    <section class="health-overview">
      <div class="health-status">
        <div class="status-text">健康状态：良好</div>
        <div class="score">88分</div>
      </div>
      <div class="date">10月26日</div>
      <div class="view-details">查看详情</div>

      <div class="indicators">
        <div class="indicator blood-pressure">
          <div class="indicator-icon">❤️</div>
          <div class="indicator-name">血压</div>
          <div class="indicator-value">135/85</div>
          <div class="indicator-status high">偏高</div>
        </div>
        <div class="indicator heart-rate">
          <div class="indicator-icon">💙</div>
          <div class="indicator-name">心率</div>
          <div class="indicator-value">72</div>
          <div class="indicator-status normal">正常</div>
        </div>
        <div class="indicator blood-sugar">
          <div class="indicator-icon">🩸</div>
          <div class="indicator-name">血糖</div>
          <div class="indicator-value">5.6</div>
          <div class="indicator-status normal">正常</div>
        </div>
      </div>
    </section>

    <!-- 提示信息 -->
    <section class="health-plan">
      <div class="alert-box">
        <div class="alert-title">您的血压偏高，建议休息</div>
        <div class="alert-content">请注意监测血压变化，避免剧烈运动</div>
        <button class="alert-button">查看建议</button>
      </div>

      <div class="section-title">今日健康计划</div>

      <div class="plan-item completed">
        <div class="plan-icon">✔</div>
        <div class="plan-content">
          <div class="plan-title">晨起服药</div>
          <div class="plan-status">已完成</div>
        </div>
      </div>

      <div class="plan-item pending">
        <div class="plan-icon">○</div>
        <div class="plan-content">
          <div class="plan-title">上午散步30分钟</div>
          <div class="plan-status">未完成</div>
        </div>
      </div>

      <div class="plan-item pending">
        <div class="plan-icon">○</div>
        <div class="plan-content">
          <div class="plan-title">测量血压</div>
          <div class="plan-status">未完成</div>
        </div>
      </div>
    </section>

    <!-- 功能区域 -->
    <section class="functions">
      <div class="function-grid">
        <div class="function-item blood-pressure-func">
          <div class="function-icon">📊</div>
          <div class="function-title">测量血压</div>
        </div>

        <div class="function-item medication-func">
          <div class="function-icon">💊</div>
          <div class="function-title">用药提醒</div>
        </div>

        <div class="function-item family-func">
          <div class="function-icon">👨‍👩‍👧</div>
          <div class="function-title">家人联系</div>
        </div>

        <div class="function-item health-record-func">
          <div class="function-icon">📁</div>
          <div class="function-title">健康档案</div>
        </div>
      </div>

      <div class="health-knowledge">
        <div class="knowledge-title">健康小知识</div>
        <div class="knowledge-content">
          <div class="knowledge-image">医护人员图片</div>
          <div class="knowledge-text">
            <div class="knowledge-subtitle">老年人如何预防高血压</div>
            <div class="knowledge-desc">合理饮食、适当运动、定期检查是预防高血压的关键...</div>
          </div>
        </div>
        <div class="read-more">阅读更多</div>
      </div>
    </section>
  </div>
</template>

<script></script>

<style scoped>
body {
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
  font-size: 16px;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  background-color: #fff;
  min-height: 100vh;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 健康概览部分 */
.health-overview {
  padding: 20px;
  background: linear-gradient(135deg, #6a89cc 0%, #4a69bd 100%);
  color: white;
  border-radius: 0 0 20px 20px;
}

.health-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.status-text {
  font-size: 20px;
  font-weight: bold;
}

.score {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 18px;
}

.date {
  font-size: 16px;
  margin-bottom: 15px;
}

.view-details {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 8px 15px;
  border-radius: 20px;
  text-align: center;
  font-size: 16px;
}

.indicators {
  display: flex;
  justify-content: space-between;
  margin: 25px 0;
}

.indicator {
  text-align: center;
  flex: 1;
}

.indicator-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 24px;
}

.blood-pressure .indicator-icon {
  background-color: #ff6b6b;
}

.heart-rate .indicator-icon {
  background-color: #4d96ff;
}

.blood-sugar .indicator-icon {
  background-color: #ff9f45;
}

.indicator-value {
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0;
}

.indicator-status {
  font-size: 16px;
  padding: 3px 10px;
  border-radius: 10px;
  display: inline-block;
}

.normal {
  background-color: #2ed573;
}

.high {
  background-color: #ff6b6b;
}

.attention {
  background-color: #ff9f45;
}

/* 提示框 */
.alert-box {
  background-color: #ffcccc;
  padding: 15px;
  border-radius: 15px;
  margin: 20px 0;
  color: #d63031;
}

.alert-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.alert-content {
  font-size: 16px;
  margin-bottom: 10px;
}

.alert-button {
  background-color: #d63031;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 16px;
  width: 100%;
}

/* 健康计划 */
.health-plan {
  padding: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #2d3436;
}

.plan-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.plan-item:last-child {
  border-bottom: none;
}

.plan-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
}

.completed .plan-icon {
  background-color: #2ed573;
  color: white;
}

.pending .plan-icon {
  background-color: #dfe6e9;
  color: #636e72;
}

.plan-content {
  flex: 1;
}

.plan-title {
  font-size: 18px;
  margin-bottom: 5px;
}

.plan-status {
  font-size: 16px;
}

.completed .plan-status {
  color: #2ed573;
}

.pending .plan-status {
  color: #636e72;
}

/* 功能区域 */
.functions {
  padding: 20px;
  background-color: #f8f9fa;
}

.function-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.function-item {
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.function-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 28px;
  color: white;
}

.blood-pressure-func .function-icon {
  background-color: #4d96ff;
}

.medication-func .function-icon {
  background-color: #2ed573;
}

.family-func .function-icon {
  background-color: #ff9f45;
}

.health-record-func .function-icon {
  background-color: #a55eea;
}

.function-title {
  font-size: 18px;
  font-weight: bold;
}

/* 健康知识 */
.health-knowledge {
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.knowledge-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.knowledge-content {
  display: flex;
  margin-bottom: 15px;
}

.knowledge-image {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: #dfe6e9;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #636e72;
  font-size: 14px;
}

.knowledge-text {
  flex: 1;
}

.knowledge-subtitle {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.knowledge-desc {
  font-size: 16px;
  color: #636e72;
  line-height: 1.5;
}

.read-more {
  color: #4d96ff;
  text-align: right;
  font-size: 16px;
}
</style>
